<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI-进度条</title>
<script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<script type="text/javascript">
	$(function(){
		
		$("#b").click(function(){
			onload();	
		})
		
		/*采用递归的方法实现进度条刷新  */
		var i = 0;
		function onload(){
			$('#p').progressbar({ value:i++});
			if(i<=100){
				/*延时加载,到了指定的时间,则执行函数,时间
				单位是毫秒*/
				setTimeout(function(){
					onload();
				}, 1)
			}
		}
	})
	
</script>
</head>
	<body>
		<div id="p" class="easyui-progressbar" style="width:400px;"></div>
		<input id="b" type="button" value="加载"/> 
	</body>
	
	
</html>




